@font-face {
    font-family: Cookie;
    src:url('/Fonts/Cookie-Regular.ttf')
}

@font-face {
    font-family: Lato;
    src:url('/Fonts/Lato-Regular.ttf')
}


body, html {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/*图片缩放动画*/
@keyframes img-scale {
    0% {
        transform: perspective(500px) translate3d(0, 0, 0);
        opacity: 0
    }
    3% {
        transform: perspective(500px) translate3d(0, 0, 10px);
        opacity: 1
    }
    97% {
        transform: perspective(500px) translate3d(0, 0, 30px);
        opacity: 1
    }
    100% {
        transform: perspective(500px) translate3d(0, 0, 40px);
        opacity: 0
    }
}

/*个性签名浮现动画*/
@keyframes quoto_float {
    0% {transform: translate(0,65%);opacity: 0}
    100%{transform: translate(0,0);opacity: 1}
}

/*背景颜色*/
#background-color {
    z-index: 1;
    background: gray;
}
    /*背景图片*/
    #background-pic {
        width: 100%;
        height: 100%;
    }
        /*暗黑色遮罩*/
        #dark-mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.33);
        }


    #info-card-background{
        width: 100%;
        height: 100%;
        filter: blur(7px);
    }

        #info-card-background-move{
            width: 110%;
            height: 110%;
        }

    /*头像*/
    #head-pic{
        border-radius: 50% 50% 50% 50%;
        position: relative;
        top: -18%;
        margin: 0 auto;
        height: 38%;
        width: 60%;
        overflow: hidden;
        transform:perspective(300px) translate3d(0,0,0px);
        transition:transform 0.25s;
    }

    /*头像鼠标划入放大*/
    #head-pic:hover{
        transform:perspective(300px) translate3d(0,0,20px);
        transition:transform 0.25s;
    }

    /*博客名*/
    #bloger-name{
        display: block;
        position: relative;
        text-align: center;
        font-size: 4.5em;
    }

    /*个性签名*/
    #quoto{
        display: block;
        text-align: center;
        font-size: 1.4em;
        opacity: 0;
        animation: quoto_float 1s linear forwards;
        animation-delay: 500ms;
    }

    /*卡片底部*/
    #info-footer{
        margin: 18% auto;
        height: 13%;
        width: 90%;
        position: relative;

        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }
            /*外部链接图片*/
            #info-footer>span>a>img{
                display: block;
                margin: 0 auto;
                max-width: 25%;
                height: auto;
            }
            /*外部链接图片*/
            #info-footer>span>img{
                display: block;
                margin: 0 auto;
                max-width: 25%;
                height: auto;
                cursor: pointer;
            }


@media screen and (max-width: 450px){
    /*个人信息卡片*/
    #info-card{
        margin: 0 auto;
        position: relative;
        top: -72vh;
        width: 185px;
        height: 270px;
        /*background: rgba(255, 255, 255, 0.34);*/
        box-shadow: 10px 20px 10px black;
        transform: translate3d(0,0,60px);
        border-radius: 15px;
    }
    /*info卡片的磨砂背景*/
    #info-card-background-container{
        width: 185px;
        height: 270px;
        position: absolute;
        transform: translate3d(0,0,60px);
        overflow: hidden;
        border-radius: 15px;
    }



    /*博客名*/
    #bloger-name{
        display: block;
        position: relative;
        text-align: center;
        font-size: 3.5em;
    }
    /*个性签名*/
    #quoto{
        display: block;
        text-align: center;
        font-size: 1.2em;
    }
}

@media screen and (max-width: 768px) and (min-width: 451px){
    #info-card{
        margin: 0 auto;
        position: relative;
        top: -72vh;
        width: 200px;
        height: 305px;
        /*background: rgba(255, 255, 255, 0.34);*/
        box-shadow: 10px 20px 10px black;
        transform: translate3d(0,0,60px);
        border-radius: 15px;
    }

    #info-card-background-container{
        position: absolute;
        width: 200px;
        height: 305px;
        transform: translate3d(0,0,60px);
        overflow: hidden;
        border-radius: 15px;
    }

    #bloger-name{
        display: block;
        position: relative;
        text-align: center;
        font-size: 4.1em;
    }

    #quoto{
        display: block;
        text-align: center;
        font-size: 1.2em;
    }
}

@media screen and (max-width: 1440px)  and (min-width: 769px){
    #info-card{
        margin: 0 auto;
        position: relative;
        top: -72vh;
        width: 230px;
        height: 333px;
        /*background: rgba(255, 255, 255, 0.34);*/
        box-shadow: 10px 20px 10px black;
        transform: translate3d(0,0,60px);
        border-radius: 15px;
    }

    #info-card-background-container{
        border-radius: 15px;
        position: absolute;
        width: 230px;
        height: 333px;
        transform: translate3d(0,0,60px);
        overflow: hidden;
    }

    #head-pic{
        border-radius: 90px 90px 90px 90px;
        position: relative;
        top: -18%;
        margin: 0 auto;
        height: 38%;
        width: 54%;
    }

}

@media screen and (min-width: 1441px){
    #head-pic{
        border-radius: 50% 50% 50% 50%;
        position: relative;
        top: -18%;
        margin: 0 auto;
        height: 36%;
        width: 51%;
    }

    #info-card{
        margin: 0 auto;
        position: relative;
        top: -72vh;
        width: 314px;
        height: 453px;
        /*background: rgba(255, 255, 255, 0.34);*/
        box-shadow: 10px 20px 10px black;
        transform: translate3d(0,0,60px);
        border-radius: 15px;
    }

    #info-card-background-container{
        border-radius: 15px;
        position: absolute;
        width: 314px;
        height: 453px;
        transform: translate3d(0,0,60px);
        overflow: hidden;
    }

}

/*#info-card:after{*/
    /*content: '';*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*z-index: -1;*/
    /*filter: blur(5px);*/
/*}*/

#main-content{
    top: 0;
    width: 99%;
    background: white;
    height: 98%;
    position: relative;
    margin-left: 0.5%;
    border-radius: 1% 1% 0 0;
    transition: top;
}











